<template>
    <div class="quest-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="avatar" label="微信头像" width="100">
          <template #default="scope">
            <img :src="scope.row.user_info?.avatar" class="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="昵称">
          <template #default="scope">
            <div>{{ scope.row.user_info?.nick_name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" width="380" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button
              link
              type="danger"
              size="small"
              @click="delHandle(scope.row)"
              >删除</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="statusChangeHandle(scope.row, 1)"
              >通过审核</el-button
            >
            <el-button
              link
              type="danger"
              size="small"
              @click="statusChangeHandle(scope.row, 2)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-24">
        <Pagination
          class="text-center"
          :page="pageForm.page"
          :limit="pageForm.limit"
          :total="tableTotal"
          @pagination="pageHandle"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import Pagination from '@/components/Pagination';
  import { ref, onMounted } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import {
    apiPrayList,
    apiPrayDel,
    apiPrayStatus,
  } from '@/api/pray';
  const tableData = ref([]);
  const tableTotal = ref(0);
  // 删除
  const delHandle = ({ id }) => {
    ElMessageBox.confirm('您确定要删除这个愿望吗?', '删除提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        apiPrayDel({
          id
        }).then((res) => {
          if (res.code === 200) {
            ElMessage({
              type: 'success',
              message: '删除成功'
            });
            getData();
          }
        });
      })
      .catch(() => {});
  };
  // 审核通过/拒绝
  const statusChangeHandle = ({ id }, status) => {
    ElMessageBox.confirm(`您确定要${status===1?'通过':'拒绝'}这个愿望吗?`, '删除提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        apiPrayStatus({
          id,
          status
        }).then((res) => {
          if (res.code === 200) {
            ElMessage({
              type: 'success',
              message: '操作成功'
            });
            getData();
          }
        });
      })
      .catch(() => {});
  };
  /**
   * 表格勾选复选框
   */
  const multipleSelection = ref([]);
  const handleSelectionChange = (val) => {
    multipleSelection.value = val;
    console.log(val);
  };
  /**
   * 分页
   */
  const pageForm = ref({
    page: 1,
    limit: 10
  });
  const pageHandle = (val) => {
    pageForm.value = val;
    getData();
  };
  // 获取表格数据
  const getData = async () => {
    const { data, total } = await apiPrayList(pageForm.value);
    tableData.value = data;
    tableTotal.value = total;
  };
  onMounted(() => {
    getData();
  });
  </script>
  
  <style scoped>
  .quest-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
    padding: 16px;
    box-sizing: border-box;
  }
  .cover{
    height: 36px; 
    width: 36px;
    border-radius: 6px;
  }
  </style>
  